<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        数量：<input type="text" v-model="num" value="">
        单价：<input type="text" v-model="price" value="">
       <span>{{count}}</span>
        <input v-model="user.a">
        <button @click="add()">添加</button>
    </div>

</body>
<script src="./js/vue.js" type="text/javascript"></script>
<script>
    new  Vue({
        el:"#app",
        data:{
            msg:"测试",
            num:0,
            price:0,
            count:0,
            user:{
                a:123
            }
          },
         computed:{ //计算属性
            /*
            * 1:初始化加载时，就会被执行。
            * 2：与之相关的状态属性发生变化的时候，就会被执行。
            * */
            /*count:function () {

                return (this.num*this.price);
            }*/
           /* count:function () {

                return (this.num*this.price);
            },*/
              /*
                 * 1:初始化加载时，就会被执行。
                 * 2:自己状态属性发生变化的时候，就会被执行。
                 * */
            /*count:{

                get(){
                   alert(1)
                    return 1;
                },
                set(value){
                   this.num=value;
                }
            }*/

        },
         methods:{
            add:function () {
                this.user=1;
            }
        },
        watch:{
            user:{
                handler:function () {
                    console.log(1)
                },
                deep:true,
                immediate:true
            },

            num:function (value,oldVal) {
                console.log(1)
                this.count=value*this.price;
            },
            price:function (value,oldVal) {
                this.count=value*this.num;
            }
        }
    })



</script>
</html>